<template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px">
      <h2 class="subtitle" style="margin-top: 20px; margin-left: 5px">风电场日综合报表</h2>
    </el-row>
    <div style="height: auto;margin: 0 10px">
      <iframe id="reportFrame" x-scrolling="no" style="overflow-x: auto" frameborder="0" width="100%" height="100%" :src="src"></iframe>
    </div>
  </div>
</template>

<script>
import { reportURL } from '@/config/baseConfig'

export default {
  name: 'index',
  data () {
    return {
      src: reportURL + 'productionDailyReport%252FdailyWindFarmGeneral.cpt' + '&op=write' + '&username=' + encodeURI(encodeURI(this.$store.state.user.username))
    }
  },
  methods: {
  },
  created () {
    console.log(this.src)
  },
  mounted () {
    const oIframe = document.getElementById('reportFrame')
    oIframe.onload = function () {
      const deviceWidth = Number(document.documentElement.clientWidth)
      const deviceHeight = Number(document.documentElement.clientHeight)
      oIframe.style.width = (deviceWidth - 200) / deviceWidth * 100 + 'vw' // 数字是页面布局宽度差值
      oIframe.style.height = (deviceHeight - 200) / deviceHeight * 100 + 'vh' // 数字是页面布局高度差
      console.log(oIframe)
      const tableContent = oIframe.contentWindow.document.getElementById('content-container')
      console.log(tableContent)
      tableContent.style.paddingLeft = '5%'
      tableContent.style.paddingRight = '5%'
    }
  }
}
</script>

<style scoped>

</style>
